@keyframes hatBreath {
  0% {
      transform: translateY(0%) scaleY(1);
  }
  15% {
      transform: translateY(2%);
  }
  25% {
      transform: translateY(0%) scaleY(1);
  }
  35% {
      transform: translateY(2%);
  }
  50% {
      transform: translateY(0%) scaleY(1);
  }
  100% {
      transform: translateY(0%) scaleY(1);
  }
}
@keyframes hammer {
  0% {
    //   top: 32%;
    transform: translateY(0%) skewY(0deg);
  }
  50% {
    //   top: 22%;
    transform: translateY(-15%) skewY(24deg);
  }
  100% {
    //   top: 32%;
    transform: translateY(0%) skewY(0deg);
  }
}

@keyframes handHammer {
  0% {
    //   top: 32%;
    transform: translateY(0);
  }
  50% {
    //   top: 13%;
    transform: translateY(-150%);
  }
  100% {
    //   top: 32%;
    transform: translateY(0);
  }
}

@keyframes bambooHammer {
  0% {
    //   top: -2%;
    transform: translateY(-2%);
  }
  50% {
    //   top: -19%;
    transform: translateY(-19%);
  }
  100% {
    //   top: -2%;
    transform: translateY(-2%);
  }
}

@keyframes halo {
  0% {
    visibility: visible;
    transform: scale(1);
    // top: 93%;
    // left: -4%;
    // width: 15%;
    // height: 6%;
  }
  50% {
    transform: scale(6);
    // top: 83%;
    // left: -28%;
    // width: 63%;
    // height: 27%;
  }
  100% {
    visibility: visible;
    transform: scale(1);
    // top: 93%;
    // left: -4%;
    // width: 15%;
    // height: 6%;
  }
}
.owl.captain {
  .halo {
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 93%;
    left: -4%;
    width: 15%;
    height: 6%;
    background: transparent url('../images/skin/seismic-wave.png') no-repeat center center / contain;
    border-radius: 50%;
  }
//   .ripple {
//     visibility: hidden;
//     position: absolute;
//     top: 96%;
//     left: 3%;
//     width: 15%;
//     height: 6%;
//     border: 1px solid rgba(144,98,66, .3);
//     border-radius: 50%;
//     transform: translate(-50%, -50%);
    
//     .ripple-1 {
//       position: absolute;
//       left: 50%;
//       top: 50%;
//       transform: translate(-50%, -50%);
//       width: 70%;
//       height: 64%;
//       border: 1px solid rgba(144,98,66, .7);
//       border-radius: 50%;
//       .ripple-2 {
//         position: absolute;
//         left: 50%;
//         top: 50%;
//         transform: translate(-50%, -50%);
//         width: 50%;
//         height: 54%;
//         border: 1px solid rgba(144,98,66, 1);
//         border-radius: 50%;
//       }
//     }
//   }
  &.fighting .halo {
    animation: halo .2s linear 1 .3s;
  }
//   &.fighting .ripple {
//     visibility: visible;
//     width: 80%;
//     height: 50%;
//     border: 3px solid rgba(144,98,66, .3);
//     transition: all .1s linear .3s;
    
//     .ripple-1 {
//       width: 70%;
//       height: 64%;
//       border: 3px solid rgba(144,98,66, .7);
//       .ripple-2 {
//         width: 50%;
//         height: 54%;
//         border: 3px solid rgba(144,98,66, 1);
//       } 
//     }
//   }
  .body {
    .hat {
      position: absolute;
      left: 16.3%;
      top: -26%;
      height: 63%;
    }
    .clothes {
      position: absolute;
      left: 20.1%;
      top: 42.5%;
      height: 47.5%;
    }
    .health {
        top: -36%;
    }
  }

}
.owl.fly {
  .body {
    .wings.folded {
      visibility: hidden;
    }
  }
}